@charset'UTF-8';
 /**
 * 商品列表布局
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/11/23
 */
 @import'../_components/variables.scss';
 @import'../_components/_mixin.scss';


 @import'../_components/column.scss';


 $rem: 1rem/32;

/**
 * 商品列表
 * @param  {string} $priceWrapperColor         价格包裹颜色
 * @param  {Numner} $colNum:2                  列数
 * @param  {[type]} $gap                       间隙
 */
 @mixin productList($priceWrapperColor:#cf2541,$priceBoxShadow:#a22f27,$colNum:2,$gap:$rem*8){

    @include column('.bf-',$colNum,$gap);

    .pro-wrapper{
        background: #FFF;
        padding-bottom:$rem*18;
        margin-bottom:$rem*8;
        border-radius:$rem*10;
        overflow:hidden;
        .pic{
            height:$rem*300;
            margin: $rem*20;
            background-size: cover;
            background-position: top;
        }
        .info{
            padding:0 $rem*22;
            font-size:$rem*22;
            color:#a3a3a3;
            margin-top:$rem*10;
            .market-price {
                height: $rem*32;
            }
            &>h4{
                color:#333;
                height:$rem*66;
                margin-top: $rem*10;
                @include textOverFlow(2);
            }
            .original-price{
                margin:$rem*10 0 0;
            }
        }
       .price-wrapper{
            width:100%;
            height:$rem*60;
            line-height:$rem*60;
            border:1px solid $priceWrapperColor;
            border-radius:$rem*60;
            box-shadow: 0 1px $priceBoxShadow;
            background-color: $priceWrapperColor;
            margin-top:$rem*10;
            &>span{
                display:inline-block;
                height:100%;
                text-align:center;
                float:left;
            }
            &>:first-child{
                background:#fff;
                color:$priceWrapperColor;
                border-top-left-radius: $rem*60;
                border-bottom-left-radius: $rem*60;
                width:40%;
                font-weight:bold;
            }
            &>:last-child{
                background:$priceWrapperColor;
                color:#fff;
                border-top-right-radius: $rem*60;
                border-bottom-right-radius: $rem*60;
                width:60%;
                &>strong{
                    font-size:$rem*35;
                    font-weight:bold;
                }
            }
        }
        //圣诞价格2
        .price-wrapper2{
            width:100%;
            height:$rem*60;
            line-height:$rem*60;
            border:1px solid $priceWrapperColor;
            border-radius:$rem*12;
            background-color: $priceWrapperColor;
            margin-top:$rem*10;
            &>span{
                display:inline-block;
                height:100%;
                text-align:center;
                float:left;
            }
            &>:first-child{
                background:#ef3b3b;
                color:#fff;
                border-radius: $rem*12;
                width:40%;
                font-weight:bold;
            }
            &>:last-child{
                background:#fff;
                color:#ef3b3b;
                border-top-right-radius: $rem*12;
                border-bottom-right-radius: $rem*12;
                width:60%;
                &>strong{
                    font-size:$rem*35;
                    font-weight:bold;
                }
            }
        }
        //圣诞价格3
        .price-wrapper3{
            width:100%;
            height:$rem*60;
            line-height:$rem*60;
            border:1px solid $priceWrapperColor;
            border-radius:$rem*12;
            background-color: $priceWrapperColor;
            margin-top:$rem*10;
            &>span{
                display:inline-block;
                height:100%;
                text-align:center;
                float:left;
            }
            &>:first-child{
                background:#fff;
                color:#cf2541;
                width:40%;
                font-weight:bold;
            }
            &>:last-child{
                background:#cf2541;
                color:#fff;
                border-top-right-radius: $rem*12;
                border-bottom-right-radius: $rem*12;
                width:60%;
                &>strong{
                    font-size:$rem*35;
                    font-weight:bold;
                }
            }
        }
        .national-wrapper{
            height:$rem*33;
        }
        .national-flag{
            display:inline-block;
            width:$rem*25;
            height:$rem*25;
            background-size:contain;
            background-repeat:no-repeat;
            vertical-align: middle;
            margin-right:$rem*10;
        }
    }

 }
